<template>
  <div class="instructions-container">
    <div class="instructions-header" :style="{
      left: props.isMobile ? '0' : props.isCollapse ? '64px' : '98px',
    }">
      <h2 :class="{ 'clickable-title': props.isMobile }" @click="props.isMobile && $emit('toggle-sidebar')">
        <!--加上logo-->
        <img src="/favicon.svg" alt="LOGO" class="header-logo">
        使用说明
        <!-- 点击图标打开侧边栏 -->
        <div v-if="isMobile" @click="toggleSidebar" class="icon-wrapper">
          <el-icon class="title-icon" style="font-size: 24px">
            <Operation />
          </el-icon>
        </div>
      </h2>
      <div class="header-buttons">
        <!-- PC端按钮组 -->
        <template v-if="!props.isMobile">
          <!-- 系统主题按钮 -->
          <el-tooltip :content="followSystem ? '已跟随系统主题' : '点击跟随系统主题'" placement="bottom">
            <el-button :icon="followSystem ? 'Monitor' : 'Sunrise'" @click="toggleFollowSystem" circle size="medium"
              :type="followSystem ? 'success' : ''" class="system-theme-btn" />
          </el-tooltip>
          <el-tooltip :content="followSystem
            ? '已启用跟随系统主题，无法手动切换'
            : isDark
              ? '切换为浅色模式'
              : '切换为深色模式'
            " placement="bottom">
            <el-button :icon="isDark ? 'Sunny' : 'Moon'" @click="toggleDark()" circle size="medium"
              :type="isDark ? 'warning' : 'info'" class="system-theme-btn" :disabled="followSystem" />
          </el-tooltip>
          <el-tooltip :content="isFullscreen ? '退出全屏' : '打开全屏'" placement="bottom">
            <el-button :icon="isFullscreen ? 'Close' : 'FullScreen'" @click="toggleFullScreen" circle size="medium"
              :class="['fullscreen-btn', { 'is-active': isFullscreen }]" />
          </el-tooltip>
        </template>
        <!-- 移动端仅显示主题切换 -->
        <template v-if="isMobile">
          <!-- 系统主题按钮 -->
          <el-tooltip :content="followSystem ? '已跟随系统主题' : '点击跟随系统主题'" placement="bottom" :hide-after="1500"
            effect="light">
            <el-button :icon="followSystem ? 'Cellphone' : 'Sunrise'" @click="toggleFollowSystem" circle size="medium"
              :type="followSystem ? 'success' : ''" class="system-theme-btn" />
          </el-tooltip>
          <!-- 深色主题按钮 -->
          <el-tooltip :content="followSystem
            ? '已启用跟随系统主题，无法手动切换'
            : isDark
              ? '切换为浅色模式'
              : '切换为深色模式'
            " placement="bottom" :hide-after="1500" effect="light">
            <el-button :icon="isDark ? 'Sunny' : 'Moon'" :type="isDark ? 'warning' : 'info'" @click="toggleDark()"
              circle size="medium" class="system-theme-btn" :disabled="followSystem" />
          </el-tooltip>
        </template>
      </div>
    </div>
    <div class="instructions-content">
      <div class="image-container">
        <img src="/zhanshi.png" alt="人生计算器" class="card-image" />
        <div class="image-overlay">
          <div class="overlay-content">
            <el-icon :size="48">
              <View />
            </el-icon>
            <span>向下查看更多</span>
          </div>
        </div>
      </div>
      <!-- 桌面版使用卡片展示 -->
      <template v-if="!props.isMobile">
        <el-card shadow="hover" class="instructions-card">
          <template #header>
            <div class="card-header">
              <h3>关于人生计算器</h3>
            </div>
          </template>
          <div class="instructions-text">
            <p>
              人生计算器是一个帮助您可视化人生时间进程的工具。通过输入您的出生日期和预期寿命，您可以直观地看到自己目前处于人生的哪个阶段，以及未来的时间规划。
            </p>
            <h3>主要功能</h3>
            <ul>
              <li>
                <strong>生命统计：</strong>显示您的当前年龄、已度过的时间百分比、剩余年数和天数
              </li>
              <li>
                <strong>图片导出：</strong>对您的信息进行汇总并总结成一张图片进行导出。（不同主题下导出的图片颜色不同哦）
              </li>
              <li>
                <strong>精确时间统计：</strong>精确到秒和毫秒的已经活过的时间和剩余时间
              </li>
              <li>
                <strong>生命阶段分布：</strong>可视化展示人生不同阶段的时间分配
              </li>
              <li><strong>人生里程碑：</strong>展示未来的重要时间节点</li>
              <li>
                <strong>人生时间线：</strong>以格子形式展示每一年，并可点击获取详细描述
              </li>
            </ul>
            <h3>如何使用</h3>
            <ol>
              <li>在基本信息区域输入您的出生日期</li>
              <li>调整预期寿命（默认为80岁），可在页面进行更改</li>
              <li>查看各种统计信息和可视化图表</li>
              <li>
                点击人生时间线上的格子，获取该年龄阶段的详细描述，由Deepseek提供阶段人生理解
              </li>
            </ol>
            <h3>关于数据</h3>
            <p>
              所有数据都在本地计算和存储，应用不会收集或传输您的个人信息。描述内容由AI生成，仅供参考和娱乐使用。
            </p>
            <div class="disclaimer">
              <el-alert title="✨ 星光免责声明" type="warning"
                description="本计算器以趣味数据编织人生星轨，所有结果皆为理想化模拟，不可替代真实生命的万千可能。愿你在此收获片刻灵感微光，但请谨记：命运的诗篇应由你亲手写就，数据仅是沿途一朵野花的倒影。愿每个数字都成为你奔赴远方的风，而非定义价值的标尺。"
                show-icon :closable="false" />
            </div>
          </div>
        </el-card>
        <el-card shadow="hover" class="instructions-card">
          <template #header>
            <div class="card-header">
              <span>功能说明</span>
            </div>
          </template>
          <div class="feature-grid">
            <div class="feature-item">
              <el-icon>
                <Calendar />
              </el-icon>
              <h4>年龄计算</h4>
              <p>根据您的出生日期，精确计算您当前的年龄</p>
              <p>
                这个计算只是您的身份证年龄，并没有包含农历的运算，所以您不必纠结，因为农历比较负责😁
              </p>
            </div>
            <div class="feature-item">
              <el-icon>
                <Timer />
              </el-icon>
              <h4>时间统计</h4>
              <p>展示已度过和剩余的时间，精确到秒</p>
              <p>
                当我们看着飞速奔跑的毫秒，我们应当认识到时间没有停，即便您将后端的代码改掉让时间停下来，但是时间总之是不会停下来的，所以我们要认真对待每一刻！
              </p>
            </div>
            <div class="feature-item">
              <el-icon>
                <PieChart />
              </el-icon>
              <h4>生命阶段分析</h4>
              <p>可视化不同生命阶段的时间分配</p>
              <p>
                通过年龄格子，宏观的看到您的人生进度，您当前走到了哪里，您现在的人生应该是如愿的吧！
              </p>
            </div>
            <div class="feature-item">
              <el-icon>
                <Connection />
              </el-icon>
              <h4>人生时间线</h4>
              <p>直观展示每一年的人生状态</p>
              <p>
                每一年都是一个新的开始，每一年都是一个新的挑战，每一年都是一个新的自己，所以我们要好好珍惜每一年！
              </p>
            </div>
            <div class="feature-item">
              <!--AI理解人生-->
              <el-icon>
                <Cpu />
              </el-icon>
              <h4>接入AI</h4>
              <p>展示AI和人类对不同年龄段的理解</p>
              <p>
                使用国产功能强大的Deepseek
                R1模型进行输出对您这个年龄阶段，不同人生阶段的理解！
              </p>
              <div style="width: 60px; height: 60px; margin: 0 auto">
                <svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink">
                  <path id="path"
                    d="M27.501 8.46875C27.249 8.3457 27.1406 8.58008 26.9932 8.69922C26.9434 8.73828 26.9004 8.78906 26.8584 8.83398C26.4902 9.22852 26.0605 9.48633 25.5 9.45508C24.6787 9.41016 23.9785 9.66797 23.3594 10.2969C23.2275 9.52148 22.79 9.05859 22.125 8.76172C21.7764 8.60742 21.4238 8.45312 21.1807 8.11719C21.0098 7.87891 20.9639 7.61328 20.8779 7.35156C20.8242 7.19336 20.7695 7.03125 20.5879 7.00391C20.3906 6.97266 20.3135 7.13867 20.2363 7.27734C19.9258 7.84375 19.8066 8.46875 19.8174 9.10156C19.8447 10.5234 20.4453 11.6562 21.6367 12.4629C21.7725 12.5547 21.8076 12.6484 21.7646 12.7832C21.6836 13.0605 21.5869 13.3301 21.501 13.6074C21.4473 13.7852 21.3662 13.8242 21.1768 13.7461C20.5225 13.4727 19.957 13.0684 19.458 12.5781C18.6104 11.7578 17.8438 10.8516 16.8877 10.1426C16.6631 9.97656 16.4395 9.82227 16.207 9.67578C15.2314 8.72656 16.335 7.94727 16.5898 7.85547C16.8574 7.75977 16.6826 7.42773 15.8193 7.43164C14.957 7.43555 14.167 7.72461 13.1611 8.10938C13.0137 8.16797 12.8594 8.21094 12.7002 8.24414C11.7871 8.07227 10.8389 8.0332 9.84766 8.14453C7.98242 8.35352 6.49219 9.23633 5.39648 10.7441C4.08105 12.5547 3.77148 14.6133 4.15039 16.7617C4.54883 19.0234 5.70215 20.8984 7.47559 22.3633C9.31348 23.8809 11.4307 24.625 13.8457 24.4824C15.3125 24.3984 16.9463 24.2012 18.7881 22.6406C19.2529 22.8711 19.7402 22.9629 20.5498 23.0332C21.1729 23.0918 21.7725 23.002 22.2373 22.9062C22.9648 22.752 22.9141 22.0781 22.6514 21.9531C20.5186 20.959 20.9863 21.3633 20.5605 21.0371C21.6445 19.752 23.2783 18.418 23.917 14.0977C23.9668 13.7539 23.9238 13.5391 23.917 13.2598C23.9131 13.0918 23.9512 13.0254 24.1445 13.0059C24.6787 12.9453 25.1973 12.7988 25.6738 12.5352C27.0557 11.7793 27.6123 10.5391 27.7441 9.05078C27.7637 8.82422 27.7402 8.58789 27.501 8.46875ZM15.46 21.8613C13.3926 20.2344 12.3906 19.6992 11.9766 19.7227C11.5898 19.7441 11.6592 20.1875 11.7441 20.4766C11.833 20.7617 11.9492 20.959 12.1123 21.209C12.2246 21.375 12.3018 21.623 12 21.8066C11.334 22.2207 10.1768 21.668 10.1221 21.6406C8.77539 20.8477 7.64941 19.7988 6.85547 18.3652C6.08984 16.9844 5.64453 15.5039 5.57129 13.9238C5.55176 13.541 5.66406 13.4062 6.04297 13.3379C6.54199 13.2461 7.05762 13.2266 7.55664 13.2988C9.66602 13.6074 11.4619 14.5527 12.9668 16.0469C13.8262 16.9004 14.4766 17.918 15.1465 18.9121C15.8584 19.9688 16.625 20.9746 17.6006 21.7988C17.9443 22.0879 18.2197 22.3086 18.4824 22.4707C17.6895 22.5586 16.3652 22.5781 15.46 21.8613ZM16.4502 15.4805C16.4502 15.3105 16.5859 15.1758 16.7568 15.1758C16.7949 15.1758 16.8301 15.1836 16.8613 15.1953C16.9033 15.2109 16.9424 15.2344 16.9727 15.2695C17.0273 15.3223 17.0586 15.4004 17.0586 15.4805C17.0586 15.6504 16.9229 15.7852 16.7529 15.7852C16.582 15.7852 16.4502 15.6504 16.4502 15.4805ZM19.5273 17.0625C19.3301 17.1426 19.1328 17.2129 18.9434 17.2207C18.6494 17.2344 18.3281 17.1152 18.1533 16.9688C17.8828 16.7422 17.6895 16.6152 17.6074 16.2168C17.5732 16.0469 17.5928 15.7852 17.623 15.6348C17.6934 15.3105 17.6152 15.1035 17.3877 14.9141C17.2012 14.7598 16.9658 14.7188 16.7061 14.7188C16.6094 14.7188 16.5205 14.6758 16.4541 14.6406C16.3457 14.5859 16.2568 14.4512 16.3418 14.2852C16.3691 14.2324 16.501 14.1016 16.5322 14.0781C16.8838 13.877 17.29 13.9434 17.666 14.0938C18.0146 14.2363 18.2773 14.498 18.6562 14.8672C19.0439 15.3145 19.1133 15.4395 19.334 15.7734C19.5078 16.0371 19.667 16.3066 19.7754 16.6152C19.8408 16.8066 19.7559 16.9648 19.5273 17.0625Z"
                    fill-rule="nonzero" fill="#4D6BFE"></path>
                </svg>
              </div>
            </div>
            <div class="feature-item">
              <el-icon>
                <Picture />
              </el-icon>
              <h4>导出图片</h4>
              <p>生成一张您专属的图片，底部包含带有您输入的名字的水印！</p>
              <p>
                一张图片不大，但是展示了人生的短暂，那么就让我们好好珍惜当下。你可以闯出一片天，也可以普普通通，都是一样的
              </p>
            </div>
            <div class="feature-item">
              <el-icon>
                <Sunrise />
              </el-icon>
              <h4>主题模式</h4>
              <p>网页支持不同颜色的主题模式，在右上角可以点击按钮切换主题色</p>
              <p style="color: red">小Tips：切换后，导出的图片颜色也不同哦！</p>
            </div>
            <div class="feature-item">
              <el-icon>
                <Smoking />
              </el-icon>
              <h4>敬请期待</h4>
              <p>抽根🚬等会儿</p>
              <p>更多功能正在开发中，敬请期待！</p>
              <p>也可以在Gitee上进行留言，想要加入什么功能！</p>
            </div>
          </div>
        </el-card>
        <!-- 添加新的更新内容卡片 -->
        <!--
          primary - 蓝色，当前用于"首发"功能
          success - 绿色，当前用于"新增"功能
          info - 灰蓝色，建议用于"增强"功能
          warning - 黄色，当前用于"优化"功能
          danger - 红色，当前用于"修复"功能
        -->
        <el-card shadow="hover" class="instructions-card">
          <template #header>
            <div class="card-header">
              <span>更新内容
                <AiFillAppstore />
              </span>
            </div>
          </template>
          <div class="update-content">
            <el-timeline>
              <el-timeline-item v-for="(version, index) in filteredVersionHistory" :key="index"
                :timestamp="version.date" :type="version.type" :size="index === 0 ? 'large' : 'normal'" placement="top">
                <h4>{{ version.version }} {{ version.title }}</h4>
                <ul class="update-list">
                  <li v-for="(change, changeIndex) in version.changes" :key="changeIndex">
                    <el-tag size="small" :type="change.type" class="version-tag">{{ change.label }}</el-tag>
                    {{ change.content }}
                  </li>
                </ul>
              </el-timeline-item>
            </el-timeline>

            <div class="future-updates">
              <h4>
                <el-icon>
                  <Opportunity />
                </el-icon>
                准备做的功能
              </h4>
              <ul class="update-list">
                <li v-for="(feature, index) in plannedFeatures" :key="index">
                  <el-tag size="small" :type="feature.type" class="version-tag">{{ feature.label }}</el-tag>
                  {{ feature.content }}
                </li>
              </ul>
            </div>
          </div>
        </el-card>
      </template>

      <!-- 移动版直接展示内容，不使用卡片 -->
      <template v-else>
        <div class="mobile-section">
          <h3 class="mobile-section-title">关于人生计算器</h3>
          <div class="instructions-text">
            <p>
              人生计算器是一个帮助您可视化人生时间进程的工具。通过输入您的出生日期和预期寿命，您可以直观地看到自己目前处于人生的哪个阶段，以及未来的时间规划。
            </p>

            <h3>主要功能</h3>
            <ul>
              <li>
                <strong>生命统计：</strong>显示您的当前年龄、已度过的时间百分比、剩余年数和天数
              </li>
              <li>
                <strong>图片导出：</strong>对您的信息进行汇总并总结成一张图片进行导出。（不同主题下导出的图片颜色不同哦）
              </li>
              <li>
                <strong>精确时间统计：</strong>精确到秒和毫秒的已经活过的时间和剩余时间
              </li>
              <li>
                <strong>生命阶段分布：</strong>可视化展示人生不同阶段的时间分配
              </li>
              <li><strong>人生里程碑：</strong>展示未来的重要时间节点</li>
              <li>
                <strong>人生时间线：</strong>以格子形式展示每一年，并可点击获取详细描述
              </li>
            </ul>

            <h3>如何使用</h3>
            <ol>
              <li>在基本信息区域输入您的出生日期</li>
              <li>调整预期寿命（默认为80岁），可在页面进行更改</li>
              <li>查看各种统计信息和可视化图表</li>
              <li>点击人生时间线上的格子，获取该年龄阶段的详细描述</li>
            </ol>

            <h3>关于数据</h3>
            <p>
              所有数据都在本地计算和存储，应用不会收集或传输您的个人信息。描述内容由AI生成，仅供参考和娱乐使用。
            </p>
            <div class="disclaimer">
              <el-alert title="✨ 星光免责声明" type="warning"
                description="本计算器以趣味数据编织人生星轨，所有结果皆为理想化模拟，不可替代真实生命的万千可能。愿你在此收获片刻灵感微光，但请谨记：命运的诗篇应由你亲手写就，数据仅是沿途一朵野花的倒影。愿每个数字都成为你奔赴远方的风，而非定义价值的标尺。"
                show-icon :closable="false" />
            </div>
          </div>
        </div>
        <div class="mobile-section">
          <h3 class="mobile-section-title">功能说明</h3>
          <div class="mobile-feature-grid">
            <div class="mobile-feature-item">
              <el-icon>
                <Calendar />
              </el-icon>
              <h4>年龄计算</h4>
              <p>根据您的出生日期，精确计算您当前的年龄</p>
              <p>
                这个计算只是您的身份证年龄，并没有包含农历的运算，所以您不必纠结，因为农历比较负责😁
              </p>
            </div>
            <div class="mobile-feature-item">
              <el-icon>
                <Timer />
              </el-icon>
              <h4>时间统计</h4>
              <p>展示已度过和剩余的时间，精确到秒</p>
              <p>
                当我们看着飞速奔跑的毫秒，我们应当认识到时间没有停，即便您将后端的代码改掉让时间停下来，但是时间总之是不会停下来的，所以我们要认真对待每一刻！
              </p>
            </div>
            <div class="feature-item">
              <el-icon>
                <PieChart />
              </el-icon>
              <h4>生命阶段分析</h4>
              <p>可视化不同生命阶段的时间分配</p>
              <p>
                通过年龄格子，宏观的看到您的人生进度，您当前走到了哪里，您现在的人生应该是如愿的吧！
              </p>
            </div>
            <div class="feature-item">
              <el-icon>
                <Connection />
              </el-icon>
              <h4>人生时间线</h4>
              <p>直观展示每一年的人生状态</p>
              <p>
                每一年都是一个新的开始，每一年都是一个新的挑战，每一年都是一个新的自己，所以我们要好好珍惜每一年！
              </p>
            </div>
            <div class="mobile-feature-item">
              <!--AI理解人生-->
              <el-icon>
                <Cpu />
              </el-icon>
              <h4>接入AI</h4>
              <p>展示AI和人类对不同年龄段的理解</p>
              <p>
                使用国产功能强大的Deepseek
                R1模型进行输出对您这个年龄阶段，不同人生阶段的理解！
              </p>
              <div style="width: 60px; height: 60px; margin: 0 auto">
                <svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink">
                  <path id="path"
                    d="M27.501 8.46875C27.249 8.3457 27.1406 8.58008 26.9932 8.69922C26.9434 8.73828 26.9004 8.78906 26.8584 8.83398C26.4902 9.22852 26.0605 9.48633 25.5 9.45508C24.6787 9.41016 23.9785 9.66797 23.3594 10.2969C23.2275 9.52148 22.79 9.05859 22.125 8.76172C21.7764 8.60742 21.4238 8.45312 21.1807 8.11719C21.0098 7.87891 20.9639 7.61328 20.8779 7.35156C20.8242 7.19336 20.7695 7.03125 20.5879 7.00391C20.3906 6.97266 20.3135 7.13867 20.2363 7.27734C19.9258 7.84375 19.8066 8.46875 19.8174 9.10156C19.8447 10.5234 20.4453 11.6562 21.6367 12.4629C21.7725 12.5547 21.8076 12.6484 21.7646 12.7832C21.6836 13.0605 21.5869 13.3301 21.501 13.6074C21.4473 13.7852 21.3662 13.8242 21.1768 13.7461C20.5225 13.4727 19.957 13.0684 19.458 12.5781C18.6104 11.7578 17.8438 10.8516 16.8877 10.1426C16.6631 9.97656 16.4395 9.82227 16.207 9.67578C15.2314 8.72656 16.335 7.94727 16.5898 7.85547C16.8574 7.75977 16.6826 7.42773 15.8193 7.43164C14.957 7.43555 14.167 7.72461 13.1611 8.10938C13.0137 8.16797 12.8594 8.21094 12.7002 8.24414C11.7871 8.07227 10.8389 8.0332 9.84766 8.14453C7.98242 8.35352 6.49219 9.23633 5.39648 10.7441C4.08105 12.5547 3.77148 14.6133 4.15039 16.7617C4.54883 19.0234 5.70215 20.8984 7.47559 22.3633C9.31348 23.8809 11.4307 24.625 13.8457 24.4824C15.3125 24.3984 16.9463 24.2012 18.7881 22.6406C19.2529 22.8711 19.7402 22.9629 20.5498 23.0332C21.1729 23.0918 21.7725 23.002 22.2373 22.9062C22.9648 22.752 22.9141 22.0781 22.6514 21.9531C20.5186 20.959 20.9863 21.3633 20.5605 21.0371C21.6445 19.752 23.2783 18.418 23.917 14.0977C23.9668 13.7539 23.9238 13.5391 23.917 13.2598C23.9131 13.0918 23.9512 13.0254 24.1445 13.0059C24.6787 12.9453 25.1973 12.7988 25.6738 12.5352C27.0557 11.7793 27.6123 10.5391 27.7441 9.05078C27.7637 8.82422 27.7402 8.58789 27.501 8.46875ZM15.46 21.8613C13.3926 20.2344 12.3906 19.6992 11.9766 19.7227C11.5898 19.7441 11.6592 20.1875 11.7441 20.4766C11.833 20.7617 11.9492 20.959 12.1123 21.209C12.2246 21.375 12.3018 21.623 12 21.8066C11.334 22.2207 10.1768 21.668 10.1221 21.6406C8.77539 20.8477 7.64941 19.7988 6.85547 18.3652C6.08984 16.9844 5.64453 15.5039 5.57129 13.9238C5.55176 13.541 5.66406 13.4062 6.04297 13.3379C6.54199 13.2461 7.05762 13.2266 7.55664 13.2988C9.66602 13.6074 11.4619 14.5527 12.9668 16.0469C13.8262 16.9004 14.4766 17.918 15.1465 18.9121C15.8584 19.9688 16.625 20.9746 17.6006 21.7988C17.9443 22.0879 18.2197 22.3086 18.4824 22.4707C17.6895 22.5586 16.3652 22.5781 15.46 21.8613ZM16.4502 15.4805C16.4502 15.3105 16.5859 15.1758 16.7568 15.1758C16.7949 15.1758 16.8301 15.1836 16.8613 15.1953C16.9033 15.2109 16.9424 15.2344 16.9727 15.2695C17.0273 15.3223 17.0586 15.4004 17.0586 15.4805C17.0586 15.6504 16.9229 15.7852 16.7529 15.7852C16.582 15.7852 16.4502 15.6504 16.4502 15.4805ZM19.5273 17.0625C19.3301 17.1426 19.1328 17.2129 18.9434 17.2207C18.6494 17.2344 18.3281 17.1152 18.1533 16.9688C17.8828 16.7422 17.6895 16.6152 17.6074 16.2168C17.5732 16.0469 17.5928 15.7852 17.623 15.6348C17.6934 15.3105 17.6152 15.1035 17.3877 14.9141C17.2012 14.7598 16.9658 14.7188 16.7061 14.7188C16.6094 14.7188 16.5205 14.6758 16.4541 14.6406C16.3457 14.5859 16.2568 14.4512 16.3418 14.2852C16.3691 14.2324 16.501 14.1016 16.5322 14.0781C16.8838 13.877 17.29 13.9434 17.666 14.0938C18.0146 14.2363 18.2773 14.498 18.6562 14.8672C19.0439 15.3145 19.1133 15.4395 19.334 15.7734C19.5078 16.0371 19.667 16.3066 19.7754 16.6152C19.8408 16.8066 19.7559 16.9648 19.5273 17.0625Z"
                    fill-rule="nonzero" fill="#4D6BFE"></path>
                </svg>
              </div>
            </div>
            <div class="feature-item">
              <el-icon>
                <Picture />
              </el-icon>
              <h4>导出图片</h4>
              <p>生成一张您专属的图片，底部包含带有您输入的名字的水印！</p>
              <p>
                一张图片不大，但是展示了人生的短暂，那么就让我们好好珍惜当下。你可以闯出一片天，也可以普普通通，都是一样的
              </p>
            </div>
            <div class="feature-item">
              <el-icon>
                <Sunrise />
              </el-icon>
              <h4>主题模式</h4>
              <p>网页支持不同颜色的主题模式，在右上角可以点击按钮切换主题色</p>
              <p style="color: red">小Tips：切换后，导出的图片颜色也不同哦！</p>
            </div>
            <div class="feature-item">
              <el-icon>
                <Smoking />
              </el-icon>
              <h4>敬请期待</h4>
              <p>抽根🚬等会儿</p>
              <p>更多功能正在开发中，敬请期待！</p>
              <p>也可以在Gitee上进行留言，想要加入什么功能！</p>
            </div>
          </div>
        </div>
        <!-- 添加更新内容部分 -->
        <div class="mobile-section">
          <h3 class="mobile-section-title">更新内容
            <AiFillMobile />
          </h3>
          <div class="mobile-update-content">
            <el-timeline>
              <el-timeline-item v-for="(version, index) in filteredVersionHistory" :key="index"
                :timestamp="version.date" :type="version.type" :size="index === 0 ? 'large' : 'normal'" placement="top">
                <h4>{{ version.version }} {{ version.title }}</h4>
                <ul class="update-list">
                  <li v-for="(change, changeIndex) in version.changes" :key="changeIndex">
                    <el-tag size="small" :type="change.type" class="version-tag">{{ change.label }}</el-tag>
                    {{ change.content }}
                  </li>
                </ul>
              </el-timeline-item>
            </el-timeline>
            <div class="future-updates">
              <h4>
                <el-icon>
                  <Opportunity />
                </el-icon>
                准备做的功能
              </h4>
              <ul class="update-list">
                <li v-for="(feature, index) in plannedFeatures" :key="index">
                  <el-tag size="small" :type="feature.type" class="version-tag">{{ feature.label }}</el-tag>
                  {{ feature.content }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup>
import { versionHistory, plannedFeatures } from '../data/versionHistory';
import { computed } from 'vue';

// 过滤掉没有更新内容的版本
const filteredVersionHistory = computed(() => {
  return versionHistory.filter(version =>
    // 只显示有实际内容的版本
    version.changes &&
    version.changes.length > 0 &&
    // 排除只有注释的版本
    !version.changes.every(change =>
      typeof change === 'string' && change.trim().startsWith('//'))
  );
});
import {
  Calendar,
  Timer,
  PieChart,
  Connection,
  Back,
  Sunny,
  Moon,
  Menu,
  Opportunity, // 新增图标导入
  FullScreen, // 新增图标
  Close, // 新增图标
  Monitor,
} from "@element-plus/icons-vue";

import {
  AiFillMobile,
  AiFillAppstore
} from 'vue-icons-plus/ai'


// 从父组件接收属性
const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: true,
  },
  isDark: {
    type: Boolean,
    default: false,
  },
  isMobile: {
    type: Boolean,
    default: false,
  },
  toggleDark: {
    type: Function,
    default: () => { },
  },
  // 新增属性
  followSystem: {
    type: Boolean,
    default: false,
  },
  toggleFollowSystem: {
    type: Function,
    default: () => { },
  },
  toggleFullScreen: {
    type: Function,
    default: () => { },
  },
  isFullscreen: {
    type: Boolean,
    default: false,
  },
});
// 定义组件可以发出的事件
defineEmits(["back", "toggle-sidebar"]);
</script>
<style scoped>
/* Logo样式 */
.header-logo {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  vertical-align: middle;
  filter: brightness(1.2);
  transition: all 0.3s ease;
  animation: pulse 2s infinite ease-in-out;
}

.clickable-title:hover .header-logo {
  transform: rotate(15deg);
}

/* 添加轻微的脉动动画 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

/* 暗黑模式下的logo样式 */
.dark .header-logo {
  filter: brightness(1.5);
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .header-logo {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }
}

/* 替换原有的card-image样式 */
.image-container {
  position: relative;
  width: 100%;
  margin: 0 auto 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
  cursor: pointer;
}

.image-container:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 12px 30px rgba(56, 123, 255, 0.25);
}

.card-image {
  display: block;
  width: 100%;
  height: auto;
  transition: all 0.5s ease;
  filter: brightness(1);
}

.image-container:hover .card-image {
  filter: brightness(1.1);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(56, 123, 255, 0.5));
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

.image-container:hover .image-overlay {
  opacity: 1;
}

.overlay-content {
  color: #fff;
  text-align: center;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.image-container:hover .overlay-content {
  transform: translateY(0);
}

.overlay-content span {
  display: block;
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 暗黑模式适配 */
.dark .image-container {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.dark .image-container:hover {
  box-shadow: 0 12px 30px rgba(126, 185, 255, 0.25);
}

/* 为移动端优化 */
@media screen and (max-width: 768px) {
  .image-container {
    margin-bottom: 15px;
    border-radius: 8px;
  }

  .overlay-content span {
    font-size: 16px;
  }
}

/* 更新内容样式 */
.update-content,
.mobile-update-content {
  padding: 10px 0;
}

.update-list {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.update-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  line-height: 1.5;
}

.version-tag {
  margin-right: 8px;
  flex-shrink: 0;
  margin-top: 2px;
}

.future-updates,
.mobile-future-updates {
  margin-top: 30px;
  padding: 15px;
  background-color: var(--el-fill-color-light);
  border-radius: 8px;
  border-left: 4px solid var(--el-color-primary);
}

.future-updates h4,
.mobile-future-updates h4 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--el-color-primary);
}

.dark .future-updates,
.dark .mobile-future-updates {
  background-color: var(--el-fill-color-darker);
}

/* 针对移动版的特殊样式 */
.mobile-update-content .el-timeline {
  padding-left: 10px;
}

.mobile-update-content .update-list li {
  margin-bottom: 8px;
}

.mobile-future-updates {
  margin-top: 20px;
  padding: 12px;
}

/* 添加新样式 */
.clickable-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.clickable-title:active {
  opacity: 0.8;
}

.title-icon {
  font-size: 0.8em;
  margin-left: 5px;
}

/* 添加系统主题按钮样式 */
.system-theme-btn {
  border: 1px solid var(--el-border-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  outline: none;
}

.system-theme-btn:hover {
  transform: rotate(15deg);
}

/* 全屏按钮样式 */
.fullscreen-btn {
  border: 1px solid var(--el-border-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.fullscreen-btn:hover {
  transform: scale(1.08);
}

.fullscreen-btn.is-active {
  background-color: var(--el-color-primary);
  color: white;
  border-color: var(--el-color-primary);
}

.header-buttons {
  display: flex;
  align-items: center;
}

/* 说明页面样式 */
.instructions-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.instructions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--el-border-color-light);
  margin-bottom: 20px;
  position: fixed;
  top: 0;
  left: 64px;
  right: 0;
  background: #387bff;
  z-index: 1000;
  padding: 15px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: left 0.3s;
}

.dark .instructions-header {
  background: #0e1f3f;
  border-color: #283347;
}

.instructions-header h2 {
  margin: 0;
  font-size: 1.8em;
  color: var(--el-text-color-primary);
}

.instructions-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.instructions-card {
  margin-bottom: 20px;
}

.instructions-text {
  line-height: 1.8;
  color: var(--el-text-color-regular);
}

.instructions-text h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--el-text-color-primary);
}

.instructions-text ul,
.instructions-text ol {
  padding-left: 20px;
  margin: 10px 0;
}

.instructions-text li {
  margin-bottom: 8px;
}

.disclaimer {
  margin-top: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 10px;
}

.feature-item {
  background-color: var(--el-bg-color);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: center;
  /*边框 */
  border: 1px solid var(--el-border-color-light);
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.feature-item .el-icon {
  font-size: 40px;
  color: var(--el-color-primary);
  margin-bottom: 15px;
}

.feature-item h4 {
  margin: 10px 0;
  color: var(--el-text-color-primary);
}

.feature-item p {
  margin: 10px 0 0;
  color: var(--el-text-color-regular);
  font-size: 14px;
}

/* 移动端无卡片样式 */
.mobile-section {
  margin-bottom: 30px;
  background-color: transparent;
  border-radius: 8px;
  padding: 5px 0 15px;
}

.mobile-section-title {
  font-size: 1.4em;
  margin: 10px 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  color: var(--el-text-color-primary);
}

.mobile-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.mobile-feature-item {
  background-color: var(--el-bg-color);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  text-align: center;
  /*边框 */
  border: 1px solid var(--el-border-color-light);
}

.mobile-feature-item .el-icon {
  font-size: 30px;
  color: var(--el-color-primary);
  margin-bottom: 10px;
}

.mobile-feature-item h4 {
  margin: 8px 0;
  font-size: 16px;
}

.mobile-feature-item p {
  margin: 5px 0 0;
  font-size: 13px;
}

/* 移动端样式优化 */
@media screen and (max-width: 768px) {
  .instructions-container {
    padding: 10px;
  }

  .instructions-header {
    left: 0;
    padding: 10px 15px;
  }

  .instructions-header h2 {
    font-size: 1.4em;
  }

  /* 在移动端隐藏"返回主页"的文字，只显示图标 */
  .btn-text {
    display: none;
  }

  .instructions-content {
    gap: 10px;
  }

  .disclaimer {
    margin-top: 20px;
  }
}
</style>